<template>
	<div id="updateGoods">
		<el-form :model="goodsData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="goodsData.name"></el-input>
			</el-form-item>
			<el-form-item label="商品类型" prop="type">
				<el-select v-model="goodsData.type" placeholder="请选择商品类型">
					<el-option label="服饰" value="fushi"></el-option>
					<el-option label="钟表" value="zhongbiao"></el-option>
					<el-option label="数码" value="shuma"></el-option>
					<el-option label="家居" value="jiaju"></el-option>
					<el-option label="家电" value="jiadian"></el-option>
					<el-option label="运动" value="yundong"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品详情" prop='details'>
				<el-input type="textarea" v-model="goodsData.details"></el-input>
			</el-form-item>
			<el-form-item label="商品属性" prop='attribute'>
				<el-input type="textarea" v-model="goodsData.attribute"></el-input>
			</el-form-item>
			<el-form-item label="商品所在地区" prop='address'>
				<el-input v-model="goodsData.address"></el-input>
			</el-form-item>
			<el-form-item label="商品单价" prop='price'>
				<el-input v-model.number="goodsData.price"></el-input>
			</el-form-item>
			<el-form-item label="商品库存" prop='inventory'>
				<el-input v-model.number="goodsData.inventory"></el-input>
			</el-form-item>
			<el-upload name="goodsImg" :file-list="fileList" :multiple="true" class="upload-demo" :auto-upload="true" action="http://127.0.0.1:3000/upload"
			 :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" list-type="picture-card"
			 :on-success="onSuccess" ref="upload" :limit="10" :on-exceed="onExceed" :on-error="error">
				<i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
			<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "updateGoods",
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				rules: {
					name: [{
							required: true,
							message: '请输商品名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: '长度在 1 到 10 个字符',
							trigger: 'blur'
						}
					],
					type: [{
						required: true,
						message: '请商品类型',
						trigger: 'change'
					}],
					details: [{
						required: true,
						message: '请输入商品详情',
						trigger: 'blur'
					}],
					attribute: [{
						required: true,
						message: '请输入商品属性',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请填写商品所在发货地',
						trigger: 'blur'
					}],
					price: [{
							required: true,
							message: '请填写商品单价',
							trigger: 'blur'
						},
						{
							type: 'number',
							message: '单价包含其他非法字符',
							trigger: 'blur'
						}
					],
					inventory: [{
							required: true,
							message: '请填写商品库存',
							trigger: 'blur'
						},
						{
							type: 'number',
							message: '库存包含其他非法字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		props:['goodsData','fileList',"dialogTitle"],
		methods: {
			//上传成功钩子
			onSuccess(res, file, fileList) {
				this.goodsData.imgs.push(res);
			},

			//上传失败钩子
			error(res, file, fileList) {},

			//超出文件个数钩子
			onExceed() {
				console.log("超出个数");
			},

			//自定义提交
			// submitUpload() {
			// 	this.$refs.upload.submit();
			// },

			//删除当前选中文件的钩子
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},

			//点击文件列表中已上传的文件时的钩子
			handlePreview(file) {
				console.log(file);
			},

			//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
			handleChange(file) {

			},

			//覆盖默认上传行为，实现自定义上传
			uploadFile() {

			},

			//提交文本数据
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let date = new Date().toLocaleString();
						this.goodsData.date = date;
						this.$request({
							method: 'post',
							url: '/addGoods',
							data: this.goodsData
						}).then(res => {
							let that = this;
							this.$message({
								showClose: false,
								center:true,
								duration:1000,
								message: '恭喜你，上传成功！',
								type: 'success',
								onClose: () => {
									that.$emit('updateGoods', false);
									that.$emit('getGoodsList');
								}
							});
							console.log(res);
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$confirm('是否确认重置，录入的信息将会被删除！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$refs[formName].resetFields();
				}).catch(() => {

				})

			}
		}

	}
</script>

<style scoped>

</style>
